@import "page-common";
@import "arow-part";
div.sub-nav-menu{
  margin-bottom: 20px;
}
.download-unit{
  margin-bottom: 20px;
}
.arow-parts{
  font-family: @YaHei-font-family;
  padding: 0 10px;
  @body-width: (@client-page-width - (10px *2));
  .arow{
    .arow-part-body{
      div.top-banner{
        @banner-width: (@body-width - (2 * 20px));
        width: @banner-width;
        height: 610px;
        //background-color: #0066cc;
        div.left-part{
          width: ((@banner-width / 2 - 5px) - (2 * 20px));
          padding-top: 20px;
          margin-right: 5px;
          float: left;
          //background-color: #ffff00;
        }
        div.right-part{
          float: right;
          margin-left: 5px;
          @right-part-width: (@banner-width / 2 - 5px);
          width: @right-part-width;
          //background-color: red;
          .row{
            //background-color: green;
            border-bottom: 1px dashed #cccccc;
          }
          .part1{
            padding-bottom: 10px;
            margin-bottom: 10px;
            .hero-text1{
              text-align: center;
              color: #333333;
              font-size: 44px; font-weight: bold;
            }
            .hero-text2{
              text-align: center;
              color: #333333;
              font-size:24px; font-weight: bold;
              margin-bottom: 15px;
            }
            p.desc-text{
              font-size: 14px;
              color: #000000;
              text-indent: 2em;
            }
          }
          div.part2{
            padding: 20px 20px;
            h3.label{
              //background-color: royalblue;
              padding: 5px 0 8px 0;
            }
            .dimensional-code{
              margin-bottom: 10px;
              img{
                width: ( @right-part-width - (2 * 20px) );
              }
            }
            div.download-btn{

              width: ( @right-part-width - (2 * 20px) );
              //height: 80px;
              //background-color: royalblue;
              a.left-btn{
                img{
                  border: 1px solid #cccccc;
                  border-radius: 3px;
                  width: 170px;
                }
                //float: left;
              }
              a.right-btn{
                img{
                  border: 1px solid #cccccc;
                  border-radius: 3px;
                  width: 170px;
                }
                float: right;
              }
            }
          }
        }
      }
    }
    .arow-part-footer{
      height: 10px;
      background: transparent url("../images/arow-part-footer-bg.jpg");
    }
  }
}
#historyListReadme{
    div.arow-part-header{
      padding: 0 40px;
      h1{
        font-size: 25px;
        margin-bottom: 20px;
      }
      p.desc{
        color: #000000;
        text-indent: 2em;
        margin-bottom: 10px;
      }
      ul{
        margin-left: 40px;
        margin-bottom: 10px;
        li{
          font-size: 14px;
          padding-left: 15px;
          background: transparent url("../images/dot.jpg") no-repeat left center;
        }
      }
      div.alert-text{
        margin-left: 40px;
        margin-bottom: 10px;
        p{
          padding: 2px 0;
          text-align: left;
          font-size: 12px;
        }
      }
    }
}
div.history-list{
  padding: 0 40px;
}
div.timeline{
  font-family: @YaHei-font-family;
  width: 900px;
  height: 600px;
  overflow: hidden;

  margin: 40px auto;
  position: relative;
  background: url('../images/component/timeline-dot.gif') 3px top repeat-y;
  h2{
    font-size: 14px;
    padding: 3px 5px;
    border: 1px solid #ffcc00;
    border-left: none;
    border-radius: 0px 2px 2px 0;
    width: 100px;
    text-align: center;
    margin-left: 5px;
    background: #ffffff;
  }
  ul.timeline-dates{
    width: 150px;
    height: 600px;
    overflow: hidden;
    float: left;
    li{
      list-style: none;
      width: 150px;
      height: 100px;
      line-height: 100px;
      font-size: 24px;
      padding-left: 10px;
      background: url('../images/component/timeline-biggerdot.png') left center no-repeat;
      //background-color: red;
      a{
        //background-color: blue;
        color: #7c7c7c;
        text-decoration: none;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -ms-transition: 0.5s;
        transition: 0.5s;

        line-height: 38px;
        padding-bottom: 10px;
        display: block;
        margin-top: 5px;
        &.selected, &:hover{
          color: #5e5e5e;
        }
        &.selected{
          font-size: 38px;
          span.year{
            font-size: 14px;
          }
        }
        span.year{
          display: block;
          font-size: 12px;
          color: #cccccc;
        }
      }
    }
  }
  ul.timeline-client-infos{
    width: 700px;
    height: 800px;
    overflow: hidden;
    float: left;
    //background: #ffffff;
    li{
      //background-color: green;
      width: 700px;
      height: 800px;
      list-style: none;
      div.download-code{
        width: 260px;
        margin: 0 auto;
        position: relative;
        div.new-version{
          position: absolute;
          top: 0px;
          left: -80px;
        }
        //background: green;
        h1.title{
          padding: 5px 10px;
          background: #1592cc;
          border-radius: 3px;
          border: 1px solid #cccccc;
          text-align: center;
          color: #ffffff;
        }
        img.client-img{
          width: 260px;
        }
      }
      a.download-btn{

        display: block;
        background: #c6d880 url('../images/blue-btn-bg.png') repeat-x;
        width: 252px; height: 55px;
        //background: red;
        line-height: 55px;
        color: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 3px;
        text-align: center;
        text-decoration: none;
        margin: 0 auto;
      }
      .timeline-client-version{
        text-align: center;
        color: #ccc;
        text-shadow: #000 1px 1px 2px;
        margin-bottom: 5px;
        font-size: 48px;
        //background-color: red;
      }
      h1 {
        font-size: 18px;
      }
      h2 {
        font-size: 14px;
      }
      div.change-list{
          width: 600px;
          margin: 0 auto;
          h1.title{
            span{
              color: #ffffff;
              padding: 5px;
              background-color: @base-blue-color;
            }
            padding-bottom: 5px;
            border-bottom: 1px solid @base-blue-color;
            margin-bottom: 10px;
          }
          p{
            background: transparent url("../images/dot.jpg") no-repeat left;
            font-size: 12px;
            padding: 2px 5px 2px 16px;
            margin: 2px 0px 2px 8px;

          }
      }
    }
  }
}


.page-last-footer{
  margin-bottom: 300px;
}